<template>
  <a-modal
      :footer="null"
      :maskClosable="false"
      :title="title"
      :visible="visible"
      :width="720"
      @cancel="handleCancel"
  >
    <a-descriptions :column="2" label-class-name="desc-label">
      <a-descriptions-item label="商户单号">
        <a-tag color="blue" size="small">{{ detailData.merchantOrderId }}</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="支付单号">
        <a-tag v-if="detailData.orderNo" color="orange" size="small">{{ detailData.orderNo }}</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="应用编号">{{ detailData.appId }}</a-descriptions-item>
      <a-descriptions-item label="应用名称">{{ detailData.appName }}</a-descriptions-item>
      <a-descriptions-item label="支付状态">
        <a-tag :color="(Status[detailData.status] ||  {color:''}).color">
          {{ (Status[detailData.status] || {name: ''}).name }}
        </a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="支付金额">
        <a-tag color="green" size="small">{{ detailData.price | price }}</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="手续费">
        <a-tag v-if="detailData.channelFeePrice" color="orange" size="small">
          {{ detailData.channelFeePrice | price }}
        </a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="手续费比例">
        <span v-if="detailData.channelFeeRate">{{ detailData.channelFeeRate }} %</span>
      </a-descriptions-item>
      <a-descriptions-item label="支付时间">
        <span v-if="detailData.successTime">{{ (detailData.successTime) | moment }}</span>
      </a-descriptions-item>
      <a-descriptions-item label="失效时间">
        {{ (detailData.expireTime) | moment }}
      </a-descriptions-item>
      <a-descriptions-item label="创建时间">
        {{ (detailData.creationTime) | moment }}
      </a-descriptions-item>
    </a-descriptions>
    <a-divider/>
    <a-descriptions :column="2" label-class-name="desc-label">
      <a-descriptions-item label="商品标题">{{ detailData.subject }}</a-descriptions-item>
      <a-descriptions-item label="商品描述">{{ detailData.body }}</a-descriptions-item>
      <a-descriptions-item label="支付渠道">
        <a-tag v-if="detailData.channelCode">{{ PayChannelCode[detailData.channelCode].name }}</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="支付 IP">{{ detailData.userIp }}</a-descriptions-item>
      <a-descriptions-item label="渠道单号">
        <a-tag v-if="detailData.channelOrderNo" color="green" size="small">
          {{ detailData.channelOrderNo }}
        </a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="渠道用户">{{ detailData.channelUserId }}</a-descriptions-item>
      <a-descriptions-item label="退款金额">
        <a-tag color="red" size="small">
          {{ detailData.refundPrice | price }}
        </a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="通知 URL">{{ detailData.notifyUrl }}</a-descriptions-item>
    </a-descriptions>
    <a-divider/>
    <a-descriptions :column="1" bordered label-class-name="desc-label" layout="vertical">
      <a-descriptions-item label="支付通道异步回调内容">
        <div style="white-space: pre-wrap; word-break: break-word">
          {{ detailData.channelNotifyData }}
        </div>
      </a-descriptions-item>
    </a-descriptions>
  </a-modal>
</template>

<script>
import * as OrderApi from '@/api/pay/order'
import StatusEnum from '@/common/enum/pay/PayStatusEnum'
import PayChannelCodeEnum from '@/common/enum/pay/PayChannelCodeEnum'

export default {
  name: 'PayOrderDetail',
  data() {
    return {
      // 对话框标题
      title: '订单详情',
      // modal(对话框)是否可见
      visible: false,
      detailData: {}
    }
  },
  computed: {
    Status() {
      return StatusEnum
    },
    PayChannelCode() {
      return PayChannelCodeEnum
    }
  },
  methods: {
    async open(id) {
      try {
        this.detailData = await OrderApi.detail(id)
        this.visible = true
      } catch (e) {
        this.$message.error("获取订单详情失败，请稍后再试")
      }
    },
    // 关闭对话框事件
    handleCancel() {
      this.visible = false
    },
  }
}
</script>
<style lang="less">
.ant-modal-body {
  padding-bottom: 24px !important;
}
</style>